<h1>Radio Group</h1>

<h4>Defaults</h4>
<div>
    <FluentRadioGroup Name="numbers">
        <label style="color: --var(neutral-foreground-rest);" slot="label">
            Numbers
        </label>
        <FluentRadio Value="one">One</FluentRadio>
        <FluentRadio Value="two">Two</FluentRadio>
    </FluentRadioGroup>
</div>

<h4>Single radio</h4>
<div style="display: flex; flex-direction: column; margin-top: 12px;">
    <FluentRadioGroup Name="players">
        <label style="color: --var(neutral-foreground-rest);" slot="label">
            Best basketball players
        </label>
        <FluentRadio Value="airjordan">Michael Jordan</FluentRadio>
    </FluentRadioGroup>
</div>

<h4>With label outside group</h4>
<div style="display: flex; flex-direction: column; margin-top: 12px;">
    <label id="label1">Outside label</label>
    <FluentRadioGroup Required="true" aria-labelledby="label1" Name="fruits" Orientation="Orientation.Vertical">
        <FluentRadio Value="apples">Apples</FluentRadio>
        <FluentRadio Value="oranges">Oranges</FluentRadio>
        <FluentRadio Value="bananas">Bananas</FluentRadio>
        <FluentRadio Value="kiwi">Kiwi</FluentRadio>
        <FluentRadio Value="grapefruit">Grapefruit</FluentRadio>
        <FluentRadio Value="mango">Mango</FluentRadio>
        <FluentRadio Value="blueberries">Blueberries</FluentRadio>
        <FluentRadio Value="strawberries">Strawberries</FluentRadio>
        <FluentRadio Value="pineapple">Pineapple</FluentRadio>
    </FluentRadioGroup>
</div>

<h4>Within toolbar</h4>
<div role="toolbar" style="display: flex; flex-direction: column; margin-top: 12px;">
    <div style="display: flex; flex-direction: row; align-items: stretch; width: 100%;">
        <button style="width: 40px; margin-right: 4px;">go</button>
        <FluentRadioGroup Required="true" Name="navigation">
            <FluentRadio Value="back">back</FluentRadio>
            <FluentRadio Value="forward">forward</FluentRadio>
            <FluentRadio Value="refresh">refresh</FluentRadio>
        </FluentRadioGroup>
        <button style="width: 40px; margin-left: 4px;">stop</button>
    </div>
</div>

<h4>Disabled</h4>
<div style="display: flex; flex-direction: column; margin-top: 12px;">
    <label id="label2">Disabled radio group</label>
    <FluentRadioGroup disabled aria-labelledby="label2" Name="cars">
        <FluentRadio Value="lambo">Lamborghini</FluentRadio>
        <FluentRadio Value="ferari">Ferari</FluentRadio>
    </FluentRadioGroup>
</div>

<h4>Readonly</h4>
<div style="display: flex; flex-direction: column; margin-top: 12px;">
    <label id="label3">readonly radio group</label>
    <FluentRadioGroup readonly aria-labelledby="label3" Name="office">
        <FluentRadio Value="word">Word</FluentRadio>
        <FluentRadio Value="excel">Excel</FluentRadio>
    </FluentRadioGroup>
</div>

<h4>Preset value</h4>
<div style="display: flex; flex-direction: column; margin-top: 12px;">
    <label id="label4">Preset selected-value</label>
    <FluentRadioGroup Value="maverick" aria-labelledby="label4" Name="best-pilot">
        <FluentRadio Value="ice-man">Ice Man</FluentRadio>
        <FluentRadio Value="maverick">Maverick</FluentRadio>
        <FluentRadio Value="viper">Viper</FluentRadio>
        <FluentRadio Value="jester">Jester</FluentRadio>
    </FluentRadioGroup>
</div>